<template>
  <div class="analysis-table">
    <!-- <div class="name">
      <span>交叉(卡方)</span>
      <span>
        <el-select v-model="chiSquareValue" style="width: 200px">
          <el-option label="数字(占比)" value="1" />
          <el-option label="数字" value="2" />
          <el-option label="百分比" value="3" />
        </el-select>
      </span>
    </div> -->
    <div style="box-shadow: 0 0 10px #ccc;padding: 10px;margin: 10px 0;border-radius: 5px;">
      <table style="width: 100%" v-if="currentData" id="score">
        <thead>
          <tr>
            <th :colspan="currentData.options.length + 3">方差分析结果 </th>
          </tr>
          <tr>
            <th rowspan="2" colspan="1"></th>
            <th rowspan="1" :colspan="currentData.options.length">{{ currentData.title?.name }}</th>
            <th rowspan="2" colspan="1">F</th>
            <th rowspan="2" colspan="1">p</th>
          </tr>
          <tr>
            <th v-for="(i, index) in currentData.options" :key="index">{{ i.optionDesc }} (n={{ i.frequency }})</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in currentData.items" :key="index">
            <td>{{ item.name }}</td>
            <td v-for="(j, index) in item.avgs" :key="index">
              {{ (j * 1).toFixed(2) }}±{{ (item.stds[index] * 1).toFixed(2) }}
            </td>
            <td>{{ item.fValue.toFixed(3) }}</td>
            <td>{{ item.pValue.toFixed(3) }}</td>
          </tr>
          <tr class="lastTopBorder">
            <td :colspan="currentData.options.length + 3" style="text-align: left">* p &lt;0.05 ** p &lt;0.01</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div>
      <slot name="analysis"></slot>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue-demi'

const chiSquareValue = ref('1')
const tableData = ref([])
const selectValue = ref('1')
const prop = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})
const currentData = ref('')
onMounted(() => {
  console.log(prop.data)
  setData()
})
const setData = () => {
  const data = JSON.parse(JSON.stringify(prop.data))
  currentData.value = data
}
</script>

<style lang="scss" scoped>
.name {
  padding: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
.entropyChange {
  margin-left: 10px;
  border: 1px solid #000;
  cursor: pointer;
}
</style>
<style lang="scss">
.analysis-table {
  table {
    /* width: 100%; */
    /* border: 1px solid #DDDDDD; */
    /* width: 1137px; */
    border-collapse: collapse;
    font-size: 14px;
    background-color: #fff;
    margin-bottom: 10px;
  }

  table tr {
    width: 100%;
    /* line-height: 35px; */
    height: 27px;
    /* height: 35px; */
    text-align: center;
  }

  table tr th {
    /* background: #fafafa; */
    color: #000;
    font-weight: 400;
    /* border: 1px solid #DDDDDD; */
    line-height: 30px;
    text-align: center;
    border-bottom: 1px solid;
  }

  table tr td {
    color: #000;
    /* border: 1px solid #DDDDDD; */
    /* border-bottom: 2px solid; */
  }
}
</style>
